<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2022-12-23 13:20:30
-->
<template>
    <div class="singer-list-item" v-if="singerlist !== null" @click="gotoSinger">
        <div class="item-img">
            <img v-lazy="singerlist.picUrl" alt="">
        </div>

        <div class="item-name">
            <span>{{ singerlist.name }}</span>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
    singerlist: {
        type: Object,
        default: {}
    }
})

function gotoSinger() {
    router.push({
        name: 'Singerdetail',
        params: { id: props.singerlist.id }
    })
}
</script>

<style lang="scss" scoped>
.singer-list-item {
    .item-img {
        height: 165px;

        img {
            height: 100%;
            width: 100%;
        }
    }

    .item-name {
        margin-top: 10px;

        span {
            color: #373737;

            &:hover {
                color: black;
            }
        }
    }
}
</style>